<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="static/css/admin.css" rel="stylesheet" type="text/css">
    <link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="static/css/personal.css" rel="stylesheet" type="text/css">
    <link href="static/css/systyle.css" rel="stylesheet" type="text/css">
    <link href="static/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
    <script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>
    <script src="static/js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/element.css">

</head>
<body>

<div id="app">

    <div class="m-order" style="margin-bottom: 0px;">
        <div class="s-bar"><i class="s-icon"></i>我的订单
            <a href="" class="i-load-more-item-shadow" @click="all">
                <button class="btn btn-success btn-xs"> 全部订单</button>
            </a>
        </div>
        <!--<ul>
            <li style="width: 25%;">
                <a @click="queryByStatus(1)"><i><img src="static/images/pay.png"></i> <span>待付款<em class="m-num" style="display: none;">0</em></span></a>
            </li>
            <li style="width: 25%;">
                <a @click="queryByStatus(2)"><i><img src="static/images/send.png"></i> <span>待发货<em class="m-num" style="display: none;">0</em></span></a>
            </li>
            <li style="width: 25%;">
                <a @click="queryByStatus(3)"><i><img src="static/images/receive.png"></i> <span>待收货<em class="m-num" style="display: none;">0</em></span></a>
            </li>
            <li style="width: 25%;">
                <a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>待评价<em class="m-num" style="display: none;">0</em></span></a>
            </li>

            <li style="width: 25%;">
                <a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i> <span>已关闭<em class="m-num" style="display: none;">0</em></span></a>
            </li>
        </ul>-->
    </div>

    <div class="box-container-bottom" style="margin-bottom: 15px;"></div>


    <!-- 订单列表管理 -->
    <div class="m-logistics">
        <div class="s-bar"><i class="s-icon"></i>订单动向
        </div>
        <div class="s-content">
            <ul class="lg-list"></ul>
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>订单商品</td>
                    <td>时间</td>
                    <td>操作</td>
                </tr>
                <template v-for="order,index in this.orders">

                    <tr>
                        <td>{{index+1}}</td>
                        <td>{{order.untitled}}</td>
                        <td>{{order.createTime}}</td>
                        <td>
                            <template   v-if="order.status=='1'"> <!--v-if="order.status=='2'"-->
                                <button @click="cancel" class="btn btn-danger btn-xs" :data-index="index">
                                    取消订单
                                </button>
                            </template>

                        </td>
                    </tr>
                </template>

                <tr>
                    <td colspan="5">
                        <!-- 分页 -->
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :current-page="pageNum"
                                :page-size="limit"
                                :total="count" @current-change="pager">
                        </el-pagination>

                    </td>
                </tr>






            </table>
        </div>
    </div>

</div>
<script type="text/javascript " src="static/js/quick_links.js "></script>
<script src="static/js/cookie_utils.js"></script>
<!-- element-ui需要引入vue.js -->
<script src="static/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="static/js/element.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/utils.js"></script>

<script type="text/javascript">
    var baseUrl="http://localhost:8080/";
    var vm=new Vue({
        el:"#app",
        data:{
            token:"",
            username:"",
            pageNum:1,
            limit:4,
            userId:"",
            orders:[],
            count:0,
            status:null,


        },
        created(){
            this.token=getCookieValue("token");
            this.userId=getCookieValue("userId");

            this.username=getCookieValue("username");

            //  加载页面，请求订单信息
            var url1=baseUrl+"order/list";
            axios({
                url:url1,
                method:"get",
                headers:{
                    token:this.token
                },
                params:{
                    userId:this.userId,
                    pageNum:this.pageNum,
                    limit:this.limit,
                    status:1
                }

            }).then((res)=>{
                console.log(res.data);
                if(res.data.code==1){

                    this.orders=res.data.data.data;
                    console.log("orders是"+this.orders);
                    this.count=res.data.data.count;

                }
            });


        },
        methods: {
            // 通过分页进行查询
            pager(page){
                this.pageNum=page;
                //重新加载页面

                //  加载页面，请求订单信息

                // -------------分页查询按照状态进行查询
                var obj={
                    userId:this.userId,
                    pageNum:this.pageNum,
                    limit:this.limit
                };

                if(this.status!=null){
                    obj.status=this.status;

                }

                // ------------
                var url1=baseUrl+"order/list";
                axios({
                    url:url1,
                    method:"get",
                    headers:{
                        token:this.token
                    },
                    params:obj

                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.code==1){

                        this.orders=res.data.data.data;
                        console.log(this.orders);
                        this.count=res.data.data.count;

                    }
                });


            },

            // 通过订单状态进行查询
            queryByStatus(status){

                this.status=status;
                console.log(this.status);

// 重新按照状态查询一次



                //  加载页面，请求订单信息
                var url1=baseUrl+"order/list";
                axios({
                    url:url1,
                    method:"get",
                    headers:{
                        token:this.token
                    },
                    params:{
                        userId:this.userId,
                        pageNum:this.pageNum,
                        limit:this.limit,
                        status:this.status
                    }

                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.code==1){

                        this.orders=res.data.data.data;
                        console.log(this.orders);
                        this.count=res.data.data.count;

                    }
                });



            },

            gotoComment:function(event){
                var index=event.srcElement.dataset.index;
                console.log(index);
                var order=this.orders[index];
                localStorage.setItem("order",JSON.stringify(order));
                location.href="user-comment.html";

            },

            cancel:function(event,orders){
                var index=event.srcElement.dataset.index;
                console.log(index);
                console.log("取消订单");
                console.log(orders);
                var order666=this.orders[index];
                var url6=baseUrl+"order/cancel";
                axios({
                    url:url6,
                    method:"post",
                    headers:{
                        token:this.token
                    },
                    data:order666

                }).then((res)=>{
                    this.queryByStatus(1);
                });


            },
            all(){

                //  加载页面，请求订单信息
                var url1=baseUrl+"order/list";
                axios({
                    url:url1,
                    method:"get",
                    headers:{
                        token:this.token
                    },
                    params:{
                        userId:this.userId,
                        pageNum:this.pageNum,
                        limit:this.limit
                    }

                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.code==1){

                        this.orders=res.data.data.data;
                        console.log(this.orders);
                        this.count=res.data.data.count;

                    }
                });
            }

        },




    })

</script>


</body>
</html>
